<template>
  <div>
    <el-dialog :visible.sync="detailDialogVisible" direction="rtl" width="30%" :before-close="handleClose"
      @opened="handleOpen" :append-to-body="true" :wrapperClosable="false" :closeOnClickModal="false" :closeOnPressEscape="false">

      <div class="titleClass">设置读取路径</div>
      <el-form ref="detailForm" :model="detailForm" size="mini" :rules="rules" :label-width="formLabelWidth">

        <el-form-item label="FTP地址：" prop="addr" required>
          <el-input v-model="detailForm.addr" placeholder="请输入FTP地址" size="medium"></el-input>
        </el-form-item>
        <!-- <el-form-item label="FTP端口：" prop="port" required>
          <el-input v-model="detailForm.port" placeholder="请输入FTP端口" size="medium"></el-input>
        </el-form-item> -->
        <el-form-item label="用户名：" prop="username" required>
          <el-input v-model="detailForm.username" placeholder="请输入用户名" size="medium"></el-input>
        </el-form-item>
        <el-form-item label="口令：" prop="password" required>
          <el-input v-model="detailForm.password" placeholder="请输入口令" size="medium"></el-input>
        </el-form-item>
        <el-form-item label="读取目录：" prop="fetchDir" required>
          <el-input v-model="detailForm.fetchDir" placeholder="请输入读取目录" size="medium"></el-input>
          <div style="color: #f98446; font-size: 11px; ">格式: &nbsp;&nbsp; 斜杠+文件夹名称，如 /fetch</div>
        </el-form-item>
        <el-form-item label="归档目录：" prop="archiveDir" required>
          <el-input v-model="detailForm.archiveDir" placeholder="请输入归档目录" size="medium"></el-input>
          <div style="color: #f98446; font-size: 11px; ">格式: &nbsp;&nbsp; 斜杠+文件夹名称，如 /archive</div>
        </el-form-item>
        <el-form-item label="回传目录：" prop="feedbackDir" required>
          <el-input v-model="detailForm.feedbackDir" placeholder="请输入回传目录" size="medium"></el-input>
          <div style="color: #f98446; font-size: 11px; ">格式: &nbsp;&nbsp; 斜杠+文件夹名称，如 /feedback</div>
        </el-form-item>
        <!-- <el-form-item label="自动轮询间隔：" prop="quartzInterval">
          <el-input v-model="detailForm.quartzInterval" placeholder="请输入自动轮询间隔" size="medium"></el-input>
        </el-form-item> -->
      </el-form>
      <div class="handBtnClass">
        <div style="float:right">
          <el-button type="primary" @click="sureFn()" size="small" style="margin-top: 5px;margin-right: 20px;"
            :disabled="sureBtn">保存</el-button>
          <el-popconfirm title="确认退出设置读取路径页面吗?" icon="el-icon-info" placement="left" confirm-button-text="确认"
            @confirm="handleClose()" cancel-button-text="取消">
            <el-button slot="reference" size="small" style="margin-top: 5px;">取消</el-button>
          </el-popconfirm>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment'
import { setFileServerRules } from '@/model/eams/validator'
import { getFtp, testConnect, updateFtp } from '../js/zsdz.js'
export default {

  data() {
    return {

      detailDialogVisible: false,
      sureBtn: false,
      rules: setFileServerRules,
      formLabelWidth: '120px',
      // form表单
      detailForm: {
        configId: '',
        addr: '',
        port: '21',
        username: '',
        password: '',
        fetchDir: '',
        archiveDir: '',
        feedbackDir: '',
        quartzInterval: ''

      },

    }
  },
  methods: {

    handleOpen() {
      getFtp().then((res) => {
        if (res.code == 0) {
          this.detailForm = res.data
        } else {
          this.$message({
            type: 'error',
            message: res.message,
          })
        }
      })
    },


    //保存方法
    sureFn() {
      this.sureBtn = true
      this.$refs.detailForm.validate(async (valid) => {
        if (valid) {
          if (!this.detailForm.fetchDir.startsWith("/")) {
            this.detailForm.fetchDir = "/" + this.detailForm.fetchDir
          }
          if (!this.detailForm.archiveDir.startsWith("/")) {
            this.detailForm.archiveDir = "/" + this.detailForm.archiveDir
          }
          if (!this.detailForm.feedbackDir.startsWith("/")) {
            this.detailForm.feedbackDir = "/" + this.detailForm.feedbackDir
          }
          var a = "ftp://" + this.detailForm.addr + ":" + 21 + this.detailForm.fetchDir
          var b = "ftp://" + this.detailForm.addr + ":" + 21 + this.detailForm.archiveDir
          var c = "ftp://" + this.detailForm.addr + ":" + 21 + this.detailForm.feedbackDir
          const h = this.$createElement;
          this.$confirm('提示', {
            title: '提示',
            message: h('p', null, [
              h('div', null, '读取目录：' + a),
              h('div', null, '归档目录： ' + b),
              h('div', null, '回传目录： ' + c),
              h('div', null, '确定保存吗？ '),
            ]),
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then((_) => {
              updateFtp(this.detailForm).then((res) => {
                if (res.code == 0) {
                  this.$message({
                    type: 'success',
                    message: '配置成功',
                  })
                  this.closedFn()
                } else {
                  this.sureBtn = false
                  this.$message({
                    type: 'error',
                    message: res.message,
                  })
                }
              }).catch(error => {
                this.sureBtn = false
              })
            })
            .catch((_) => { this.sureBtn = false })
        } else {
          this.sureBtn = false
          return false
        }
      })
    },

    handleClose() {
      this.closedFn()
    },
    closedFn() {
      this.sureBtn = false
      this.$refs['detailForm'].resetFields();
      this.$refs['detailForm'].clearValidate()
      this.detailDialogVisible = false
    },
  },
}
</script>

<style scoped>
.titleClass {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  padding-left: 5px;
  border-left: 3px solid #0077ff;
  margin-bottom: 16px;
  line-height: 14px;
  margin-left: 10px;
}


.handBtnClass {
  position: sticky;
  bottom: -1px;
  width: 100%;
  height: 45px;
  line-height: var(--footer-height);
  background: #ffff;
  z-index: 100;


}
</style>

